<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型探索</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 15px;
        }
        
        .explanation {
            flex: 1;
            min-width: 300px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 12px;
            margin: 10px;
        }
        
        .visualization {
            flex: 2;
            min-width: 300px;
            padding: 15px;
            margin: 10px;
        }
        
        h2 {
            color: #3a86ff;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .data-types {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .data-type {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s;
            cursor: pointer;
            border-left: 4px solid #4361ee;
        }
        
        .data-type:hover {
            transform: translateY(-5px);
        }
        
        .data-type h3 {
            color: #4361ee;
            margin-bottom: 10px;
        }
        
        .memory-box {
            width: 100%;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            margin: 10px 0;
            overflow: hidden;
        }
        
        .memory-used {
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s;
        }
        
        .range {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .demo-area {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-top: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .input-group {
            display: flex;
            flex-wrap: wrap;
            margin: 15px 0;
            gap: 10px;
        }
        
        select, input, button {
            padding: 8px 12px;
            border: 2px solid #dee2e6;
            border-radius: 6px;
            font-size: 0.95rem;
        }
        
        button {
            background-color: #4361ee;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #3a56d4;
        }
        
        .result {
            margin-top: 15px;
            padding: 12px;
            background-color: #e7f5ff;
            border-radius: 8px;
            border-left: 4px solid #3a86ff;
        }
        
        .game-area {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .game-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }
        
        .data-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s;
            border: 2px dashed #dee2e6;
        }
        
        .data-card:hover {
            transform: scale(1.05);
        }
        
        .type-slot {
            background: #e9ecef;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            min-height: 100px;
            border: 2px dashed #adb5bd;
        }
        
        .type-slot h4 {
            margin-bottom: 8px;
            color: #495057;
        }
        
        .correct {
            border-color: #38b000;
            background-color: #d8f3dc;
        }
        
        .incorrect {
            border-color: #e63946;
            background-color: #ffccd5;
        }
        
        .score {
            font-size: 1.1rem;
            font-weight: bold;
            color: #4361ee;
            margin-top: 12px;
        }
        
        .memory-visual {
            display: flex;
            height: 150px;
            margin: 15px 0;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .memory-cell {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #dee2e6;
            transition: background-color 0.3s;
            font-size: 0.8rem;
        }
        
        .memory-cell:last-child {
            border-right: none;
        }
        
        .memory-cell.filled {
            background-color: #4cc9f0;
            color: white;
            font-weight: bold;
        }
        
        footer {
            text-align: center;
            padding: 15px;
            color: #6c757d;
            font-size: 0.85rem;
            border-top: 1px solid #dee2e6;
        }
        
        @media (max-width: 768px) {
            .data-types, .game-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>数据类型探索</h1>
            <p class="subtitle">理解数据类型如何决定存储空间、取值范围和运算</p>
        </header>
        
        <div class="content">
            <div class="explanation">
                <h2>数据类型是什么？</h2>
                <p>在编程中，数据类型决定了：</p>
                <ul>
                    <li>数据占用的内存空间大小</li>
                    <li>数据的取值范围</li>
                    <li>可以对数据进行的操作</li>
                </ul>
                
                <div class="data-types">
                    <div class="data-type" onclick="showDemo('int')">
                        <h3>整型 (int)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 25%; background-color: #4cc9f0;"></div>
                        </div>
                        <p>占用空间: 4字节</p>
                        <p class="range">范围: -2,147,483,648 到 2,147,483,647</p>
                    </div>
                    
                    <div class="data-type" onclick="showDemo('short')">
                        <h3>短整型 (short)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 12.5%; background-color: #4361ee;"></div>
                        </div>
                        <p>占用空间: 2字节</p>
                        <p class="range">范围: -32,768 到 32,767</p>
                    </div>
                    
                    <div class="data-type" onclick="showDemo('long')">
                        <h3>长整型 (long)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 50%; background-color: #3a0ca3;"></div>
                        </div>
                        <p>占用空间: 8字节</p>
                        <p class="range">范围: -9,223,372,036,854,775,808 到 9,223,372,036,854,775,807</p>
                    </div>
                    
                    <div class="data-type" onclick="showDemo('float')">
                        <h3>单精度浮点型 (float)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 25%; background-color: #f72585;"></div>
                        </div>
                        <p>占用空间: 4字节</p>
                        <p class="range">范围: ±3.4e±38 (约7位有效数字)</p>
                    </div>
                    
                    <div class="data-type" onclick="showDemo('double')">
                        <h3>双精度浮点型 (double)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 50%; background-color: #7209b7;"></div>
                        </div>
                        <p>占用空间: 8字节</p>
                        <p class="range">范围: ±1.7e±308 (约15位有效数字)</p>
                    </div>
                    
                    <div class="data-type" onclick="showDemo('char')">
                        <h3>字符型 (char)</h3>
                        <div class="memory-box">
                            <div class="memory-used" style="width: 6.25%; background-color: #4895ef;"></div>
                        </div>
                        <p>占用空间: 1字节</p>
                        <p class="range">范围: -128 到 127 或 0 到 255</p>
                    </div>
                </div>
            </div>
            
            <div class="visualization">
                <h2>数据类型演示</h2>
                
                <div class="demo-area">
                    <h3>内存占用可视化</h3>
                    <div class="memory-visual" id="memoryVisual">
                        <!-- 内存单元格将通过JS动态生成 -->
                    </div>
                    
                    <h3>运算演示</h3>
                    <div class="input-group">
                        <select id="dataTypeSelect">
                            <option value="int">整型 (int)</option>
                            <option value="short">短整型 (short)</option>
                            <option value="long">长整型 (long)</option>
                            <option value="float">单精度浮点型 (float)</option>
                            <option value="double">双精度浮点型 (double)</option>
                            <option value="char">字符型 (char)</option>
                        </select>
                        <input type="number" id="value1" placeholder="第一个值" value="100">
                        <input type="number" id="value2" placeholder="第二个值" value="50">
                        <button onclick="performOperation()">计算加法</button>
                    </div>
                    
                    <div class="result" id="operationResult">
                        选择数据类型并输入值，然后点击"计算加法"
                    </div>
                </div>
                
                <div class="game-area">
                    <h3>数据类型匹配游戏</h3>
                    <p>点击数据卡片将其放入正确的数据类型槽中</p>
                    
                    <div class="game-container" id="gameContainer">
                        <!-- 游戏内容将通过JS动态生成 -->
                    </div>
                    
                    <div class="score" id="gameScore">得分: 0/6</div>
                    <button onclick="resetGame()">重新开始游戏</button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>数据类型探索 - 互动教学工具</p>
        </footer>
    </div>

    <script>
        // 初始化内存可视化
        function initMemoryVisual() {
            const memoryVisual = document.getElementById('memoryVisual');
            memoryVisual.innerHTML = '';
            
            // 创建32个内存单元格
            for (let i = 0; i < 32; i++) {
                const cell = document.createElement('div');
                cell.className = 'memory-cell';
                cell.textContent = i;
                memoryVisual.appendChild(cell);
            }
        }
        
        // 显示数据类型演示
        function showDemo(type) {
            // 更新选择框
            document.getElementById('dataTypeSelect').value = type;
            
            // 更新内存可视化
            updateMemoryVisual(type);
            
            // 更新运算演示的默认值
            updateDefaultValues(type);
        }
        
        // 更新内存可视化
        function updateMemoryVisual(type) {
            const cells = document.querySelectorAll('.memory-cell');
            const sizes = {
                'char': 1,
                'short': 2,
                'int': 4,
                'float': 4,
                'long': 8,
                'double': 8
            };
            
            // 重置所有单元格
            cells.forEach(cell => {
                cell.classList.remove('filled');
            });
            
            // 填充对应数量的单元格
            const size = sizes[type];
            for (let i = 0; i < size; i++) {
                cells[i].classList.add('filled');
                cells[i].textContent = type;
            }
        }
        
        // 更新默认值
        function updateDefaultValues(type) {
            const defaults = {
                'char': { v1: 100, v2: 50 },
                'short': { v1: 1000, v2: 500 },
                'int': { v1: 100000, v2: 50000 },
                'float': { v1: 100.5, v2: 50.25 },
                'long': { v1: 1000000000, v2: 500000000 },
                'double': { v1: 100000.12345, v2: 50000.54321 }
            };
            
            document.getElementById('value1').value = defaults[type].v1;
            document.getElementById('value2').value = defaults[type].v2;
        }
        
        // 执行运算
        function performOperation() {
            const type = document.getElementById('dataTypeSelect').value;
            const value1 = parseFloat(document.getElementById('value1').value);
            const value2 = parseFloat(document.getElementById('value2').value);
            
            let result;
            let overflow = false;
            
            // 根据数据类型执行运算
            switch(type) {
                case 'char':
                    result = value1 + value2;
                    // 检查char类型溢出
                    if (result > 127 || result < -128) {
                        overflow = true;
                        result = "溢出! Char范围: -128 到 127";
                    }
                    break;
                case 'short':
                    result = value1 + value2;
                    // 检查short类型溢出
                    if (result > 32767 || result < -32768) {
                        overflow = true;
                        result = "溢出! Short范围: -32,768 到 32,767";
                    }
                    break;
                case 'int':
                    result = value1 + value2;
                    // 检查int类型溢出
                    if (result > 2147483647 || result < -2147483648) {
                        overflow = true;
                        result = "溢出! Int范围: -2,147,483,648 到 2,147,483,647";
                    }
                    break;
                case 'long':
                    result = value1 + value2;
                    break;
                case 'float':
                    result = value1 + value2;
                    // 浮点数精度问题演示
                    if (value1 === 0.1 && value2 === 0.2) {
                        result = "0.1 + 0.2 = " + result + " (注意浮点数精度问题)";
                    }
                    break;
                case 'double':
                    result = value1 + value2;
                    break;
            }
            
            const resultElement = document.getElementById('operationResult');
            if (overflow) {
                resultElement.innerHTML = `<strong>结果:</strong> ${result}<br>
                                          <strong>数据类型:</strong> ${type}<br>
                                          <strong>说明:</strong> 这个结果超出了${type}数据类型的表示范围，发生了溢出！`;
                resultElement.style.backgroundColor = '#ffccd5';
                resultElement.style.borderLeftColor = '#e63946';
            } else {
                resultElement.innerHTML = `<strong>结果:</strong> ${result}<br>
                                          <strong>数据类型:</strong> ${type}<br>
                                          <strong>说明:</strong> 这是${type}类型的加法运算结果`;
                resultElement.style.backgroundColor = '#e7f5ff';
                resultElement.style.borderLeftColor = '#3a86ff';
            }
        }
        
        // 初始化游戏
        function initGame() {
            const gameContainer = document.getElementById('gameContainer');
            gameContainer.innerHTML = '';
            
            // 数据类型槽
            const dataTypes = ['char', 'short', 'int', 'float', 'double', 'long'];
            dataTypes.forEach(type => {
                const slot = document.createElement('div');
                slot.className = 'type-slot';
                slot.id = `slot-${type}`;
                slot.setAttribute('data-type', type);
                
                const title = document.createElement('h4');
                title.textContent = type;
                slot.appendChild(title);
                
                gameContainer.appendChild(slot);
            });
            
            // 数据卡片
            const dataCards = [
                { value: 'A', type: 'char', description: '单个字符' },
                { value: '32700', type: 'short', description: '中等整数' },
                { value: '3.14', type: 'float', description: '小数' },
                { value: '2000000000', type: 'int', description: '大整数' },
                { value: '3.141592653589793', type: 'double', description: '高精度小数' },
                { value: '9223372036854775807', type: 'long', description: '非常大的整数' }
            ];
            
            // 随机排序
            dataCards.sort(() => Math.random() - 0.5);
            
            dataCards.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.className = 'data-card';
                cardElement.setAttribute('data-type', card.type);
                cardElement.onclick = function() { placeCard(this); };
                
                const value = document.createElement('div');
                value.style.fontSize = '1.1rem';
                value.style.fontWeight = 'bold';
                value.style.marginBottom = '5px';
                value.textContent = card.value;
                
                const desc = document.createElement('div');
                desc.style.fontSize = '0.85rem';
                desc.style.color = '#6c757d';
                desc.textContent = card.description;
                
                cardElement.appendChild(value);
                cardElement.appendChild(desc);
                
                gameContainer.appendChild(cardElement);
            });
        }
        
        // 放置卡片到对应的槽
        function placeCard(cardElement) {
            const cardType = cardElement.getAttribute('data-type');
            const slot = document.getElementById(`slot-${cardType}`);
            
            if (slot && !slot.querySelector('.data-card')) {
                // 检查是否已经正确
                if (!slot.classList.contains('correct')) {
                    slot.classList.add('correct');
                    slot.classList.remove('incorrect');
                    
                    // 将卡片移动到槽中
                    const cardClone = cardElement.cloneNode(true);
                    cardClone.onclick = null;
                    slot.appendChild(cardClone);
                    
                    // 隐藏原卡片
                    cardElement.style.display = 'none';
                    
                    // 更新分数
                    updateScore();
                }
            }
        }
        
        // 更新游戏分数
        function updateScore() {
            const correctSlots = document.querySelectorAll('.type-slot.correct').length;
            const totalSlots = document.querySelectorAll('.type-slot').length;
            document.getElementById('gameScore').textContent = `得分: ${correctSlots}/${totalSlots}`;
            
            if (correctSlots === totalSlots) {
                setTimeout(() => {
                    alert('恭喜！你已成功匹配所有数据类型！');
                }, 500);
            }
        }
        
        // 重置游戏
        function resetGame() {
            initGame();
            document.getElementById('gameScore').textContent = '得分: 0/6';
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initMemoryVisual();
            showDemo('int');
            initGame();
        };
    </script>
</body>
</html>